import LoadingButton from '@mui/lab/LoadingButton';
import { LoadingButtonTypeMap } from '@mui/lab/LoadingButton/LoadingButton';
import { Button } from '@mui/material';
import { ExtendButton } from '@mui/material/Button';
import { ButtonTypeMap } from '@mui/material/Button/Button';
import { ExtendButtonBase } from '@mui/material/ButtonBase';
import { styled } from '@mui/material/styles';
import React from 'react';

export const outlinedStyle = {
    background: '#13112A',
    border: 'solid 1px transparent',
    backgroundImage:
        'linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #0CD3E3 -1.18%, #FF007A 97.17%)',
    backgroundOrigin: 'border-box',
    backgroundClip: 'content-box, border-box',
    boxShadow: '2px 1000px 1px #13112A inset'
};

const btnBaseStyle = {
    color: '#ffffff',
    borderRadius: '0.75rem',
    minWidth: 80,
    height: 40,
    fontSize: '1rem',
    '&:hover': {
        color: '#ffffff',
        boxShadow: '2px 1000px 1px #13112A inset'
    },
    '$.Mui-disabled': {
        color: '#ffffff'
    }
};

const StyledBtn = styled(Button)(() => ({
    ...btnBaseStyle,
    textTransform: 'none',
    '&.MuiButton-containedPrimary': {
        background: 'linear-gradient(90deg, #15DEEE -1.18%, #FF007A 97.17%);',
        '&:hover': {
            ...outlinedStyle
        }
    },
    '&.MuiButton-containedSecondary': {
        background: 'linear-gradient(90deg, #0CD3E3 -19.81%, #FF007A 106.13%);',
        '&:hover': {
            ...outlinedStyle
        }
    },
    '&.MuiButton-textSecondary': {
        background: '#13112A'
    },
    '&.MuiButton-outlined': {
        ...outlinedStyle
    }
}));

const StyledLoadingBtn = styled(LoadingButton)(() => ({
    ...btnBaseStyle,
    textTransform: 'none',
    '&.MuiLoadingButton-containedPrimary': {
        background: 'linear-gradient(90deg, #15DEEE -1.18%, #FF007A 97.17%);'
    },
    '&.MuiLoadingButton-containedSecondary': {
        background: 'linear-gradient(90deg, #0CD3E3 -19.81%, #FF007A 106.13%);'
    },
    '&,MuiLoadingButton-outlined': {
        ...outlinedStyle
    },
    '&': {
        boxShadow: 'none',
        '&:hover': {
            boxShadow: 'none'
        }
    },
    '& .MuiLoadingButton-loadingIndicator': {
        color: '#ffffff'
    }
}));
const StyledSecondaryBtn = styled(Button)(() => ({
    ...btnBaseStyle,
    textTransform: 'none',
    '&.MuiButton-containedPrimary': {
        background: 'linear-gradient(90deg, #15DEEE -1.18%, #FF007A 97.17%);',
        '&:hover': {
            ...outlinedStyle
        }
    },
    '&.MuiButton-containedSecondary': {
        background: 'linear-gradient(90deg, #0CD3E3 -19.81%, #FF007A 106.13%);',
        '&:hover': {
            ...outlinedStyle
        }
    },
    '&.MuiButton-textSecondary': {
        background: '#13112A'
    },
    '&.MuiButton-outlined': {
        ...outlinedStyle,
        boxShadow: 'none'
    }
}));

export const GFSButton: React.FC<ExtendButtonBase<ButtonTypeMap> | any> = (
    props: ExtendButtonBase<ButtonTypeMap> | any
) => {
    return (
        <StyledBtn variant="contained" {...props}>
            {props.children}
        </StyledBtn>
    );
};

export const GFSLoadingButton: React.FC<ExtendButton<LoadingButtonTypeMap> | any> = (
    props: ExtendButton<LoadingButtonTypeMap> | any
) => {
    return (
        <StyledLoadingBtn variant="contained" {...props}>
            {props.children}
        </StyledLoadingBtn>
    );
};

export const GFSSecondaryButton: React.FC<ExtendButtonBase<ButtonTypeMap> | any> = (
    props: ExtendButtonBase<ButtonTypeMap> | any
) => {
    return (
        <StyledSecondaryBtn variant='contained' {...props}>
            {props.children}
        </StyledSecondaryBtn>
    );
};
